<template>
  <div class="wh-maptalks-wraper" id="maptalksMap"></div>
</template>

<script>
import * as maptalks from '../common/maptalks/maptalks.min.js'
import "../common/maptalks/maptalks.css";
export default {
  props: {

  },
  data() {
    return {
      map: null,
      markerLayer: null,
      polygonLayer: null,
      config: null,
      pathArr: [],
      pathCopyArr: [],
      pathLayer: null,
      pointArr: []
    }
  },
  mounted() {
  },
  methods: {
    loadMap (options) {
      console.log('创建maptalks地图');
      return new Promise((resolve, reject) => {
        if (options.loadConfig.offline) {
          if (!options.loadConfig.tileUrl) {
            console.warn('未配置离线地址')
            reject('未配置离线地址')
          }
        }
        this.map = new maptalks.Map('maptalksMap', {
          baseLayer: new maptalks.TileLayer('base', {
            urlTemplate: this.offline?this.tileUrl:'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.jpg',
            subdomains: ['a','b','c', 'd'],
            attribution:  false
          }),
          ...options.mapConfig
        })
        this.map.on('click', this.onClickMap)
        //  标注图层
        this.markerLayer = new maptalks.VectorLayer('marker', {
          enableAltitude : true,
          drawAltitude : {
            lineWidth : 5,
            lineColor : '#0077F1'
          },
          zIndex: 20
        })
        this.markerLayer.addTo(this.map)
        //  多边形图层
        this.polygonLayer = new maptalks.VectorLayer('polygon', {
          enableAltitude : true,
          zIndex: 10
        })
        this.polygonLayer.addTo(this.map)
        resolve(this.map)
      })
    },
    loadMarker (markerList) {
      console.log('加载 marker');
      var markers = []
      for (var i = 0; i < markerList.length; i++) {
        var markerOptions = markerList[i].options?markerList[i].options:{}
        markerOptions.markerFile = markerOptions.icon || require('../assets/marker/marker-6.png')
        markerOptions.markerWidth = markerOptions.width || 28
        markerOptions.markerHeight = markerOptions.height || 28
        markerOptions.markerOpacity = markerOptions.opacity || 1
        var marker = new maptalks.Marker(markerList[i].position, {
          properties: markerList[i].extData,
          symbol: markerOptions,
          zIndex: markerOptions.zIndex || 20
        })
        marker.on('click', this.onClickMarker)
        markers.push(marker)
      }
      this.markerLayer.addGeometry(markers)
    },
    loadPolygon (polygonList) {
      console.log('加载 plygon');
      // visible : polygonList[i].visible || true,
      // editable : polygonList[i].editable ||false,
      // cursor : polygonList[i].cursor || 'pointer',
      // draggable: polygonList[i].draggable || false,
      // dragShadow: polygonList[i].dragShadow || false, // display a shadow during dragging
      // drawOnAxis: polygonList[i].drawOnAxis || null,  // force dragging stick on a axis, can be: x, y
      // symbol: polygonList[i].symbol || {
      //   'lineColor' : '#0000FF',
      //   'lineWidth' : 3,
      //   'polygonFill' : '#0000FF',
      //   'polygonOpacity' : 0.5
      // },
      var polygons = []
      for (var i = 0; i < polygonList.length; i++) {
        var polygonOptions = polygonList[i].options? polygonList[i].options:{}
        polygonOptions.lineColor = polygonOptions.lineColor || '#00D3FC'
        polygonOptions.lineWidth = polygonOptions.lineWidth || 2
        polygonOptions.lineOpacity = polygonOptions.lineOpacity || 1
        polygonOptions.lineDasharray = polygonOptions.lineStyle === 'dashed'?[5]:null
        polygonOptions.polygonFill = polygonOptions.color || '#00D3FC'
        polygonOptions.polygonOpacity = polygonOptions.opacity || 0.5
        var polygon = new maptalks.Polygon([polygonList[i].path], {
          properties: polygonList[i].extData,
          symbol: polygonOptions,
          zIndex: polygonOptions.zIndex || 10
        });
        // polygon.setProperties(polygonList[i].extData)
        polygon.on('click', this.onClickPolygon)
        polygons.push(polygon)
      }
      this.polygonLayer.addGeometry(polygons)
    },
    loadPath (config) {
      this.pathArr = []
      this.pathCopyArr = []
      this.pointArr = []
      this.config = config
      this.pathLayer = new maptalks.VectorLayer('vector', {
        zIndex: 15
      }).addTo(this.map);
      var options = config.options?config.options:{}
      // 起点
      var startSymbol = {
        icon: require('../assets/marker/start.png'),
        width: 28,
        height: 28
      }
      if (options.start && options.start.icon) {
        startSymbol.icon = options.start.icon
      }
      if (options.start && options.start.width) {
        startSymbol.width = options.start.width
      }
      if (options.start && options.start.height) {
        startSymbol.height = options.start.height
      }
      // 终点
      var endSymbol = {
        icon: require('../assets/marker/end.png'),
        width: 28,
        height: 28
      }
      if (options.end && options.end.icon) {
        endSymbol.icon = options.end.icon
      }
      if (options.end && options.end.width) {
        endSymbol.width = options.end.width
      }
      if (options.end && options.end.height) {
        endSymbol.height = options.end.height
      }
      // 图标
      var pointSymbol = {
        icon: require('../assets/marker/car.png'),
        width: 28,
        height: 28
      }
      if (options.point && options.point.icon) {
        pointSymbol.icon = options.point.icon
      }
      if (options.point && options.point.width) {
        pointSymbol.width = options.point.width
      }
      if (options.point && options.point.height) {
        pointSymbol.height = options.point.height
      }
      //  线条样式
      var pathStyle = {
        color: 'red',
        width: 5,
        defaultColor: '#00D3FC',
        speed: 80 // m/s
      }
      if (options.line && options.line.defaultColor) {
        pathStyle.defaultColor = options.line.defaultColor
      }
      if (options.line && options.line.width) {
        pathStyle.width = options.line.width
      }
      if (options.line && options.line.color) {
        pathStyle.color = options.line.color
      }
      if (options.speed) {
        pathStyle.speed = options.speed
      }
      for (var i = 0; i < config.list.length; i++) {
        let startMarker = new maptalks.Marker(config.list[i].path[0], {
          symbol: {
            markerFile: startSymbol.icon,
            markerWidth: startSymbol.width,
            markerHeight: startSymbol.height
          },
          properties: {
            index: i
          },
          zIndex: 20
        }).addTo(this.pathLayer)
        startMarker.on('click', (e) => {
          this.onClickPoint(e, pathStyle)
        })
        let pointMarker = new maptalks.Marker(config.list[i].path[0], {
          symbol: {
            markerFile: pointSymbol.icon,
            markerWidth: pointSymbol.width,
            markerHeight: pointSymbol.height,
            markerDx: 0,
            markerDy: pointSymbol.height/2,
            // markerPlacement: //vertex, point, vertex-first, vertex-last, center
            // markerVerticalAlignment: 'middle'
          },
          properties: {
            index: i
          },
          zIndex: 20
        }).addTo(this.pathLayer)
        // pointMarker.on('click', (e) => {
        //   this.onClickPoint(e, pathStyle)
        // })
        this.pointArr.push(pointMarker)
        let endMarker = new maptalks.Marker(config.list[i].path[config.list[i].path.length - 1], {
          symbol: {
            markerFile: endSymbol.icon,
            markerWidth: endSymbol.width,
            markerHeight: endSymbol.height
          },
          zIndex: 20
        }).addTo(this.pathLayer)
        let path = new maptalks.LineString(
          config.list[i].path,
          {
            properties: config.list[i].properties,
            symbol: {
              lineColor: pathStyle.defaultColor,
              lineWidth: pathStyle.width
            }
          }
        ).addTo(this.pathLayer)
        this.pathArr.push(path)

        let pathCopy = path.copy()
        this.pathCopyArr.push(pathCopy)
      }
    },
    onClickPoint (e, pathStyle) {
      let index = e.target.getProperties().index
      var pathCopy = this.pathCopyArr[index]
      var path = this.pathArr[index]
      var point = this.pointArr[index]
      var time = path.getLength() / pathStyle.speed * 1000
      if (pathCopy.getSymbol().lineColor === pathStyle.color) {
        point.setCoordinates(path.getFirstCoordinate())
        pathCopy.remove()
      }
      pathCopy.updateSymbol({
        lineColor: pathStyle.color
      })
      console.log(time);
      pathCopy.addTo(this.pathLayer)
      pathCopy.animateShow({
        duration: time,
        easing: 'linear'
      }, (frame, c) => {
        point.setCoordinates(c)
        if (frame.state.playState === 'finished') {
          // point.setCoordinates(path.getFirstCoordinate())
          // path.remove()
        }
      });
    },
    onClickMarker (e) {
      this.$emit('on-click-marker', e, e.target.getProperties())
    },
    onClickPolygon (e) {
      this.$emit('on-click-polygon', e, e.target.getProperties())
    },
    onClickMap (e) {
      // this.$emit('on-click-map', e)
    }
  },
}
</script>

<style scoped>
  .wh-maptalks-wraper {
    width: 100%;
    height: 100%;
  }
  >>> .maptalks-attribution {
    display: none !important;
  }
</style>
